$message-prefix-cls: "#{$css-prefix}message";
$icon-prefix-cls: "#{$css-prefix}icon";

.#{$message-prefix-cls} {
    font-size: $font-size-small;
    position: fixed;
    z-index: $zindex-message;
    width: 100%;
    top: $message-top;
    left: $message-left;

    &-notice {
        width: auto;
        vertical-align: middle;
        position: absolute;
        left: 50%;
        &-close {
            position: absolute;
            right: $message-notice-close-right;
            top: $message-notice-close-top;
            color: $message-notice-close-color;
            outline: none;

            i.iconfont{
                @include close-base(-1px,14px);
            }
        }
    }

    &-notice-content {
        position: relative;
        right: 50%;
        padding: $message-notice-content-padding;
        //border: 1px solid $border-color-split;
        border-radius: $border-radius-small;
        box-shadow: $message-notice-content-box-shadow;
        background:$message-notice-content-background;
        display: block;
        &-text{
            display: inline-block;
            span{
                color: $text-color;
                font-size:$message-content-font-size;
            }
        }
    }
    &-notice-closable{
        .#{$message-prefix-cls}-notice-content-text{
            padding-right: $message-notice-content-text-padding-right;
        }
    }

    &-success .#{$icon-prefix-cls} {
        color: $success-color;
    }

    &-error .#{$icon-prefix-cls} {
        color: $error-color;
    }

    &-warning .#{$icon-prefix-cls} {
        color: $warning-color;
    }

    &-info .#{$icon-prefix-cls},
    &-loading .#{$icon-prefix-cls} {
        color: $primary-color;
    }

    .#{$icon-prefix-cls} {
        margin-right:$message-icon-margin-right;
        font-size: $message-icon-font-size;
        top: $message-icon-top;
        position: relative;
    }
}